import React, { useState } from 'react';
import { Button, Table, Tag, Image } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
const { Column, ColumnGroup } = Table;

export default function goodTable(props) {
  const columns = [
    {
      title: '照片',
      dataIndex: 'photo',
      key: 'photo',
      render: (photo) => <Image width={40} src={photo} />,
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      width: '400px',
      key: 'na0me',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '商品类型',
      dataIndex: 'gname',
      key: 'gname',
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      render: (status) => (
        <Tag key={status}>{status == 1 ? '上架' : '下架'}</Tag>
      ),
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '数量',
      dataIndex: 'counts',
      key: 'counts',
    },
    {
      title: '点赞数',
      dataIndex: 'likes',
      key: 'likes',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Button
          onClick={() => openModel(text)}
          icon={<SettingOutlined />}
        ></Button>
      ),
    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      const idData = [];
      selectedRowKeys.forEach((item) => idData.push(item));
      props.delID(idData);
    },
    onSelect: (record, selected, selectedRows) => {
      // console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      // console.log(selected, selectedRows, changeRows);
    },
  };
  const openModel = (value) => {
    props.showDrawer2(value);
  };
  const [selectionType, setSelectionType] = useState('checkbox');
  return (
    <Table
      columns={columns}
      dataSource={props.goodsData}
      rowSelection={{ type: selectionType, ...rowSelection }}
      style={{ marginTop: '60px' }}
      pagination={{ pageSize: 5 }}
      rowKey="id"
      scroll={{ y: 400 }}
    />
  );
}
